<!-- 绿色通道 - 患者列表 - 医疗记录 - 生命体征 界面 -->
<template>
  <div class="vital-sign">
    <div class="add-button">
      <el-button type="primary" @click.stop="openAddDialog()">新增</el-button>
      <el-button type="primary" @click.stop="openTrend()">趋势图</el-button>
    </div>
    <div v-show="vitalFormList.length === 0">
      <center>
        <h3>无数据</h3>
      </center>
    </div>
    <el-form
      v-for="(vitalForm, vitalIndex) in vitalFormList"
      :key="'表单' + vitalIndex"
      ref="vitalForm"
      :model="vitalForm"
      :rules="vitalRules"
      label-width="80px"
      class="vital-form"
    >
      <div class="card">
        <el-row type="flex" style="margin-bottom: 16px">
          <el-col :sm="12" class="title">{{ vitalForm.beaconName }}</el-col>
          <el-col :sm="12">
            <el-row type="flex" justify="end">
              <div class="title">{{ vitalForm.createdAt }}</div>
              <div class="title">{{ vitalForm.userName }}</div>
              <div style="margin-left: 20px"><el-button
                type="primary"
                size="mini"
                @click="update(vitalForm, vitalIndex)"
              >保存</el-button></div>
            </el-row>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-form-item v-if="patientType === '创伤'" prop="type" label="患者是否有生命体征" class="short-text" label-width="150px">
            <el-radio-group v-model="vitalForm.type">
              <el-radio label="1">是</el-radio>
              <el-radio label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item v-if="patientType !== '创伤'" label="意识" :required="patientType ==='胸痛'"  :prop="patientType !== '卒中'?vitalForm.consciousnessNote:''">
            <el-select v-if="patientType == '胸痛'" v-model="vitalForm.consciousnessNote" size="mini">
              <el-option value="清醒" />
              <el-option value="对语言有反应" />
              <el-option value="对刺痛有反应" />
              <el-option value="对任何刺激无反应" />
            </el-select>
            <el-select v-if="patientType == '卒中'" v-model="vitalForm.consciousnessNote" size="mini">
              <el-option value="清醒" />
              <el-option value="模糊" />
              <el-option value="谵妄" />
              <el-option value="嗜睡" />
              <el-option value="昏睡" />
              <el-option value="浅昏迷" />
              <el-option value="中昏迷" />
              <el-option value="深昏迷" />
            </el-select>
          </el-form-item>
          <el-row v-if="!(patientType === '创伤' && vitalForm.type === '2')" type="flex">
            <el-form-item label="呼吸" :prop="patientType !== '卒中'?'rr':''" class="short-text">
              <el-input v-model="vitalForm.rr" size="mini" @input="vitalForm.rr = vitalForm.rr.replace(/[^\d]/g, '')" />
            </el-form-item>
            <div class="label">次/分钟</div>
            <el-form-item label="脉搏" :prop="patientType !== '卒中'?'pr':''" class="short-text">
              <el-input v-model="vitalForm.pr" size="mini" @input="vitalForm.pr = vitalForm.pr.replace(/[^\d]/g, '')" />
            </el-form-item>
            <div class="label">次/分钟</div>
            <el-form-item label="心率" :prop="patientType !== '卒中'?'hr':''" class="short-text">
              <el-input v-model="vitalForm.hr" size="mini" @input="vitalForm.hr = vitalForm.hr.replace(/[^\d]/g, '')" />
            </el-form-item>
            <div class="label">次/分钟</div>
            <el-form-item label="收缩压" prop="sys" class="short-text">
              <el-input
                v-model="vitalForm.sys"
                size="mini"
                @input="vitalForm.sys = (vitalForm.sys.match(/^\d+(\.?\d{0,2})/g) || '')[0] || ''"
              />
            </el-form-item>
            <div class="label">mmHg</div>
            <el-form-item label="舒张压" prop="dia" class="short-text">
              <el-input
                v-model="vitalForm.dia"
                size="mini"
                @input="vitalForm.dia = (vitalForm.dia.match(/^\d+(\.?\d{0,2})/g) || '')[0] || ''"
              />
            </el-form-item>
            <div class="label">mmHg</div>
            <el-form-item label="血氧" prop="spo2" class="short-text">
              <el-input
                v-model="vitalForm.spo2"
                size="mini"
                @input="vitalForm.spo2 = (vitalForm.spo2.match(/^\d+(\.?\d{0,2})/g) || '')[0] || ''"
              />
            </el-form-item>
            <div class="label">%</div>
            <el-form-item label="体温" prop="t1" class="short-text">
              <el-input
                v-model="vitalForm.t1"
                size="mini"
                @input="vitalForm.t1 = (vitalForm.t1.match(/^\d+(\.?\d{0,2})/g) || '')[0] || ''"
              />
            </el-form-item>
            <div class="label">℃</div>
            <el-form-item v-if="patientType == '创伤' && vitalAddform.type !== '2'" label="血糖" prop="t1" class="short-text">
              <el-input
                v-model="vitalForm.bloodsugar"
                size="mini"
                @input="vitalForm.bloodsugar = (vitalForm.bloodsugar.match(/^\d+(\.?\d{0,2})/g) || '')[0] || ''"
              />
            </el-form-item>
            <div v-if="patientType == '创伤' && vitalAddform.type !== '2'" class="label">mmol/L</div>
          </el-row>

        </el-row>

        <el-form-item v-if="!(patientType === '创伤' && vitalForm.type === '2')" label="备注"><el-input
          v-model="vitalForm.remarks"
          size="mini"
        /></el-form-item>
      </div>
    </el-form>
    <el-dialog title="生命体征新增" :visible.sync="dialogAdd" :close-on-click-modal="false" center>
      <el-form
        ref="vitalAddform"
        :model="vitalAddform"
        label-width="120px"
        class="vitalAddform"
        :rules="vitalRules"
        style="height: 265px;"
      >
        <el-form-item v-if="patientType === '创伤'" label="患者是否有生命体征" prop="type" class="short-text" label-width="220px">
          <el-radio-group v-model="vitalAddform.type">
            <el-radio label="1">是</el-radio>
            <el-radio label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-col v-if="patientType !== '创伤'" :sm="12">
          <el-form-item label="意识" :prop="patientType !== '卒中' ? 'consciousnessNote' : ''" class="conscious-note">
            <el-select
              v-if="patientType === '胸痛'"
              v-model="vitalAddform.consciousnessNote"
              size="mini"
              style="width: 200px"
            >
              <el-option value="清醒" />
              <el-option value="对语言有反应" />
              <el-option value="对刺痛有反应" />
              <el-option value="对任何刺激无反应" />
            </el-select>
            <el-select
              v-if="patientType === '卒中'"
              v-model="vitalAddform.consciousnessNote"
              size="mini"
              style="width: 100%"
            >
              <el-option value="清醒" />
              <el-option value="模糊" />
              <el-option value="谵妄" />
              <el-option value="嗜睡" />
              <el-option value="昏睡" />
              <el-option value="浅昏迷" />
              <el-option value="中昏迷" />
              <el-option value="深昏迷" />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <div v-if="patientType == '创伤' && vitalAddform.type !== '2'"> -->

        <!-- <div  v-if="patientType === '创伤' && vitalAddform.type !== '2'"> -->
        <div>
          <el-col :sm="12">
            <el-form-item label="呼吸" :prop="patientType !== '卒中'?'rr':''">
              <el-input
                v-model="vitalAddform.rr"
                size="mini"
                @input="vitalAddform.rr = vitalAddform.rr.replace(/[^\d]/g, '')"
              >
                <template slot="append">
                  次/分钟
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="脉搏" :prop="patientType !== '卒中'?'pr':''">
              <el-input
                v-model="vitalAddform.pr"
                size="mini"
                @input="vitalAddform.pr = vitalAddform.pr.replace(/[^\d]/g, '')"
              >
                <template slot="append">
                  次/分钟
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="心率" :prop="patientType !== '卒中'?'hr':''">
              <el-input
                v-model="vitalAddform.hr"
                size="mini"
                @input="vitalAddform.hr = vitalAddform.hr.replace(/[^\d]/g, '')"
              >
                <template slot="append">
                  次/分钟
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="舒张压" prop="dia">
              <el-input v-model="vitalAddform.dia" size="mini">
                <template slot="append">
                  mmHg
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="收缩压" prop="sys">
              <el-input v-model="vitalAddform.sys" size="mini">
                <template slot="append">
                  mmHg
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="血氧" prop="spo2">
              <el-input v-model="vitalAddform.spo2" size="mini">
                <template slot="append">
                  %
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="体温" prop="t1">
              <el-input v-model="vitalAddform.t1" size="mini">
                <template slot="append">
                  ℃
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col v-if="patientType === '创伤' && vitalAddform.type !== '2'" :sm="12">
            <el-form-item label="血糖" prop="spo2">
              <el-input v-model="vitalAddform.bloodsugar" size="mini">
                <template slot="append">
                  mmol/L
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24">
            <el-form-item label="备注"><el-input v-model="vitalAddform.remarks" size="mini" /></el-form-item>
          </el-col>
        </div>
      </el-form>
      <span slot="footer">
        <el-button @click="dialogAdd = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="趋势图" :visible.sync="trend" center @open="openDialog">
      <el-radio-group v-model="trendRadio" size="small" class="radio-btn" @change="openDialog">
        <el-radio-button label="rr">呼吸</el-radio-button>
        <el-radio-button label="pr">脉搏</el-radio-button>
        <el-radio-button label="hr">心率</el-radio-button>
        <el-radio-button label="sys">收缩压</el-radio-button>
        <el-radio-button label="dia">舒张压</el-radio-button>
        <el-radio-button label="spo2">血氧</el-radio-button>
        <el-radio-button label="t1">体温</el-radio-button>
      </el-radio-group>
      <el-row style="margin-bottom: 40px">
        <div id="lineChart" class="lineChart" />
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { queryPhysicalPost, savePhysics, findphysics_jili } from '@/api/green-channel/tab-request'
import echarts from 'echarts'
export default {
  // 由主页面(父组件) 接收来的, 选择项的数据
  // eslint-disable-next-line vue/require-prop-types
  props: ['checkrowdata', 'patientType'], // 由主页面(父组件) 接收来的, 选择项的数据
  data() {
    return {
      dialogAdd: false,
      trend: false,
      trendRadio: 'rr',
      vitalFormList: [],
      vitalAddform: {
        consciousnessNote: '',
        rr: '',
        pr: '',
        hr: '',
        sys: '',
        dia: '',
        spo2: '',
        t1: '',
        bloodsugar: '',
        remarks: '',
        type: ''
      },
      vitalLimit: {
        rr: 90,
        pr: 120,
        hr: 110,
        sys: 160,
        dia: 95,
        spo2: 100,
        t1: 43
      },
      vitalRules: {
        consciousnessNote: [{ required: true, message: ' ', trigger: 'blur' }],
        rr: [{ required: true, message: ' ', trigger: 'blur' }],
        pr: [{ required: true, message: ' ', trigger: 'blur' }],
        hr: [{ required: true, message: ' ', trigger: 'blur' }],
        sys: [{ required: true, message: ' ', trigger: 'blur' }],
        dia: [{ required: true, message: ' ', trigger: 'blur' }],
        type: [{ required: true, message: ' ', trigger: 'blur' }]
      }
    }
  },
  computed: {},
  created() {
    this.physical()
  },
  methods: {
    chartXData() {
      const arr = []
      this.vitalFormList.forEach(item => {
        if (item[this.trendRadio]) {
          arr.push(item.createdAt)
        }
      })
      for (var i = 0; i < arr.length / 2; i++) {
        var temp = arr[i]
        arr[i] = arr[arr.length - 1 - i]
        arr[arr.length - 1 - i] = temp
      }
      console.log("chartXData",arr)
      return arr
    },
    chartData() {
      const arr = []
      this.vitalFormList.forEach(item => {
        if (item[this.trendRadio]) {
          arr.push(item[this.trendRadio])
        }
      })
      for (var i = 0; i < arr.length / 2; i++) {
        var temp = arr[i]
        arr[i] = arr[arr.length - 1 - i]
        arr[arr.length - 1 - i] = temp
      }
      console.log("chartData",arr)
      return arr
    },
    openAddDialog() {
      console.log('开始新增')
      this.vitalAddform = {
        consciousnessNote: '',
        rr: '',
        pr: '',
        hr: '',
        sys: '',
        dia: '',
        spo2: '',
        t1: '',
        bloodsugar: '',
        remarks: '',
        type: ''
      }
      this.dialogAdd = true
    },
    // 生命体征接口
    physical() {
      // queryPhysicalPost(this.checkrowdata.dispatchId).then(res => {
      //   if (res.data) {
      //     if (res.data) {
      //       this.vitalFormList = res.data
      //       console.log(this.vitalFormList)
      //     }
      //   }
      // })
      this.findphysics_jili()
    },
    openTrend() {
      this.trend = true
    },
    add() {
      this.$refs.vitalAddform.validate(valid => {
        if (valid) {
          let aa = false
          if (this.vitalAddform.type !== '2') {
            if(this.patientType === "胸痛"){
              if(Number(this.vitalAddform.pr) < 40 || Number(this.vitalAddform.pr) > 250) {
                this.$message.error('脉搏应在40~250之间！')
                aa = true
                return
              }
            }

            if ((Number(this.vitalAddform.sys) >= 40 && Number(this.vitalAddform.sys) <= 260) &&
              (Number(this.vitalAddform.dia) >= 40 && Number(this.vitalAddform.dia) <= 260) &&
              (Number(this.vitalAddform.sys) > Number(this.vitalAddform.dia))) {
              aa = true
            } else {
              this.$message.error(' 收缩压/舒张压在40~260之间且收缩压大于舒张压！！')
              return
            }
          } else {
            aa = true
          }

          if (aa) {
            console.log(this.checkrowdata, 'this.checkrowdata')
            console.log(this.$store.getters, 'getters')
            this.vitalAddform.dispatchId = this.checkrowdata.dispatchId
            this.vitalAddform.userId = this.$store.getters.userId
            this.vitalAddform.userName = this.checkrowdata.performanceName
            // eslint-disable-next-line prefer-const
            let formData = new FormData()
            for (const key in this.vitalAddform) {
              if (!this.vitalAddform[key]) {
                this.vitalAddform[key] = ''
              }
              formData.append(key, this.vitalAddform[key])
            }
            console.log(this.vitalAddform, 'this.vitalAddform')
            savePhysics(formData).then(res => {
              if (res.code === 0) {
                this.$message.success('保存成功')
                this.dialogAdd = false
                this.physical()
              } else {
                this.$message.error('保存失败')
              }
            })
          }
        } else {
          this.$message.error('请输入完整信息')
        }
      })
    },
    update(item, index) {
      console.log(item)
      const itemFilterKeyList = ['consciousnessNote', 'createdAt', 'department', 'dispatchId', 'medicalId', 'userId', 'type', 'id']
      if (item.type === '2') {
        item.dispatchId = this.checkrowdata.dispatchId
        // eslint-disable-next-line prefer-const
        if (item.type === '2') {
          for (const item_value in item) {
            if (itemFilterKeyList.indexOf(item_value) === -1) {
              item[item_value] = ''
            }
          }
        }
        const formData = new FormData()
        for (const key in item) {
          if (!item[key]) {
            item[key] = ''
          }
          formData.append(key, item[key])
        }
        formData.delete('createdAt')
        savePhysics(formData).then(res => {
          if (res.code === 0) {
            this.$message.success('保存成功')
            this.physical()
          } else {
            this.$message.error('保存失败')
          }
        })
      } else {
        this.$refs.vitalForm[index].validate(valid => {
          if (valid) {
    
            item.dispatchId = this.checkrowdata.dispatchId
            const formData = new FormData()
            for (const key in item) {
              if (!item[key]) {
                item[key] = ''
              }
              formData.append(key, item[key])
            }
            formData.delete('createdAt')
            let aa = false
          if (formData.get("type") !== '2') {
            
            if(this.patientType === "胸痛") {
              if(Number(formData.get("pr")) < 40 || Number(formData.get("pr")) > 250) {
                this.$message.error('脉搏应在40~250之间！')
                return
              }
            }
            if ((Number(formData.get("sys")) >= 40 && Number(formData.get("sys")) <= 260) &&
              (Number(formData.get("dia")) >= 40 && Number(formData.get("dia")) <= 260) &&
              (Number(formData.get("sys")) > Number(formData.get("dia")))) {
              aa = true
            } else {
              this.$message.error(' 收缩压/舒张压在40~260之间且收缩压大于舒张压！！')
              return
            }
          } else {
            aa = true
          }

          if (aa) {
            savePhysics(formData).then(res => {
              if (res.code === 0) {
                this.$message.success('保存成功')
                this.physical()
              } else {
                this.$message.error('保存失败')
              }
            })}
          } else {
            this.$message.error('请输入完整信息')
          }
        })
      }
    },
    openDialog() {
      this.$nextTick(() => {
        this.drawLine()
      })
    },
    drawLine() {
      const myChart = echarts.init(document.getElementById('lineChart'))
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          formatter: "{b} 数值:{c}"
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          name: '日期',
          data: this.chartXData()
        },
        yAxis: {
          type: 'value',
          max: value => {
            if (value.max < this.vitalLimit[this.trendRadio]) {
              return this.vitalLimit[this.trendRadio]
            } else {
              return value.max
            }
          }
        },
        series: [
          {
            data: this.chartData(),
            type: 'line',
            color: 'rgb(64, 158, 255)',
            lineStyle: {
              color: 'rgb(64, 158, 255)'
            },
            markLine: {
              silent: true,
              lineStyle: {
                color: '#f74d58'
              },
              symbol: 'none'
            }
          }
        ]
      })
    },
    findphysics_jili() {
      findphysics_jili(this.checkrowdata.dispatchId).then(res => {
        if (res.data) {
          this.vitalFormList = res.data
          this.vitalFormList.sort(this.sortBy("id",-1))
          console.log(this.vitalFormList)
        }
      })
    },

    sortBy(attr,rev){
      if( rev==undefined ){ rev=1 }else{ (rev)?1:-1; }
      return function (a,b){
          a=a[attr];
          b=b[attr];
          if(a<b){ return rev*-1}
          if(a>b){ return rev* 1 }
          return 0;
      }
    }

  }
}
</script>
<style lang="scss" scoped>
.vital-sign {
  padding: 0 40px;

  .conscious-note {
    /deep/.el-form-item__content {
      line-height: 35px;
    }
  }

  .add-button {
    // position: fixed;
    // z-index: 9999;
    // bottom: 150px;
    //  right: 170px;
    text-align: right;
    padding-bottom: 15px;
  }

  .card {
    background-color: rgba(249, 249, 249, 1);
    padding: 15px 20px 15px 10px;
    margin-bottom: 15px;
  }

  .label {
    line-height: 36px;
    font-size: 14px;
    color: #606266;
    margin-left: 5px;
    min-width: 50px;
  }

  .el-form-item {
    margin-bottom: 16px;
  }

  .title {
    margin-right: 10px;
    line-height: 28px;
  }

  .lineChart {
    width: 100%;
    height: 300px;
  }

  .radio-btn {
    z-index: 10009;
    margin-left: 80px;
  }
}
</style>
<style lang="scss">
.vital-sign {
  .el-form-item__label {
    font-weight: normal;
  }

  .short-text {
    .el-input__inner {
      width: 60px;
      padding-right: 10px;
      min-width: unset;
    }
  }
}
</style>
